import React, {useState} from 'react';
import './Login.css';
import {useNavigate} from "react-router-dom";
import {useCookies} from "react-cookie";

function Login() {
    const [cookies, setCookie] = useCookies(["user"]);
    const navigate = useNavigate();

    const [username, setUsername] = useState('username');
    const [password, setPassword] = useState('password');

    const commit = () => {
        if (username === 'camping' && password === 'gnipmac') {
            let tomorrow = new Date();
            tomorrow.setDate(new Date().getDate() + 1);
            setCookie("user", "user", {expires: tomorrow});
            navigate("/")
        } else {
            window.alert("密码错误")

        }
    }

    return <div className="login-container">
        <h1>登录</h1>
        <form>
            <div className="form-group">
                <label htmlFor="username">用户名:</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required
                       onChange={e => setUsername(e.target.value)}/>
            </div>
            <div className="form-group">
                <label htmlFor="password">密码:</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required
                       onChange={e => setPassword(e.target.value)}/>
            </div>
            <div className="form-group">
                <button onClick={commit}>登录</button>
            </div>
        </form>
    </div>
}

export default Login;
